import { useParams } from 'react-router-dom'
import { DocEditor } from './DocEditor'
import { WebsocketProvider } from 'y-websocket'
import { useQuery } from '@tanstack/react-query'
import * as Y from 'yjs'
const doc = new Y.Doc()

const wsHost = import.meta.env.VITE_WS_HOST ?? '192.168.31.251'
const provider = new WebsocketProvider(`ws://${wsHost}:8082`, `doc-yjs`, doc, { connect: false })
export const Doc = () => { 
    const params = useParams();
    const { data: page } = useQuery({
        queryKey: ['page', params?.id],
        queryFn: async () => {
            if(!params?.id){
                return
            }
            return {id:1, pageId: params.id};
        },
        enabled: !!params?.id
    })
    return (page?.id && <DocEditor key={page?.id} pageId={page.pageId} doc={doc} provider={provider}/>)
}   